<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="baidu-site-verification" content="wIRf2YDDJm" />
<meta name="description" content="">
<meta name="author" content="">
<title>100% 喜帖</title>

<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link rel="shortcut icon" href="img/favicon.ico">
<link href="css/bootstrap.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/hunqing.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body id="page-top">
<div class="body"> 
  
  <!-- Navigation -->
  <div class="main">
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container"> 
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <a class="navbar-brand" href="#page-top"> <img src="img/logo.png" style="width:100%" alt=""> </a> </div>
        
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="page-scroll"> <a href="#page-top">首页</a> </li>
            <li class="page-scroll"> <a href="#summary">简介</a> </li>
            <li class="page-scroll"> <a href="#function">功能</a> </li>
            <li class="page-scroll"> <a href="#template">模板预览</a> </li>
            <li class="page-scroll"> <a href="#introctions">使用方法</a> </li>
            <li class="page-scroll"> <a href="#contact">找到我们</a> </li>
          </ul>
        </div>
        <!-- /.navbar-collapse --> 
      </div>
      <!-- /.container-fluid --> 
    </nav>
    <img src="../img/main.jpg" alt=""/>
  </div>
  
  <!-- Header -->
  <section id="summary">
    <div class="summary"> 
    	<img src="../img/summary.jpg" alt=""/>
    </div>
  </section>
  <section id="function">
    <div class="function">
    	<img src="../img/fun.png" alt=""/>
     </div>
  </section>
  <section id="template">
    <div class="template">
    	<img src="../img/bg_template_1.png" alt="" usemap='#b0a1a239cbf34d64acf4d6798dd67da0' id="template-img"/>

    	<map id="CribMap" name="b0a1a239cbf34d64acf4d6798dd67da0">  
		   <area shape="rect" id="blossoming" coords="115,251,376,761" href="javascript:void(0);" title="blossoming"  />  
		   <area shape="rect" id="TieTheknot" coords="512,253,768,760" href="javascript:void(0);" title="tieTheknot"  />  
		   <area shape="rect" id="redSong" coords="903,247,1159,757" href="javascript:void(0);" title="redSong"  />  
		   <area shape="rect" id="signOfLove" coords="113,1008,371,1562" href="javascript:void(0);" title="signOfLove"  />  
		   <area shape="rect" id="LoveIsAnswer" coords="514,1008,772,1555" href="javascript:void(0);" title="LoveIsAnswer"  />  
		   <area shape="rect" id="tiffBlue" coords="908,1006,1159,1553" href="javascript:void(0);" title="tiffBlue"  />
		</map>
    	<!--
      <div class="container template1">
        <div class="row">
          <div class="col-sm-4"> <a href="#portfolioModal1"> <img src="img/cover/blossoming.png" class="img-responsive" alt=""> </a> </div>
          <div class="col-sm-4 portfolio-item"> <a href="#portfolioModal1"> <img src="img/cover/tieTheknot.png" class="img-responsive" alt=""> </a> </div>
          <div class="col-sm-4 portfolio-item"> <a href="#portfolioModal1"> <img src="img/cover/redSong.png" class="img-responsive" alt=""> </a> </div>
        </div>
      </div>
      <div class="container template2">
        <div class="row">
          <div class="col-sm-4 portfolio-item"> <a href="#portfolioModal1"> <img src="img/cover/signOfLove.png" class="img-responsive" alt=""> </a> </div>
          <div class="col-sm-4 portfolio-item"> <a href="#portfolioModal1"> <img src="img/cover/loveIsAnswer.png" class="img-responsive" alt=""> </a> </div>
          <div class="col-sm-4 portfolio-item"> <a href="#portfolioModal1"> <img src="img/cover/tiffBlue.png" class="img-responsive" alt=""> </a> </div>
        </div>
      </div>
      -->
    </div>
  </section>
  <section id="onsale">
    <div class="onsale"> 
    	<img src="../img/onsale.png" alt=""/>
    </div>
  </section>
  <section id="introctions">
    <div class="introctions"> 
    	<img src="../img/introctions.png" alt=""/>
    </div>
  </section>
  <section id="contact">
    <div class="contact"> 
    	<img src="../img/contact.png" alt=""/>
    </div>
  </section>
  <section id="fotter">
    <div class="fotter"> 
    	<img src="../img/fotter.png" alt=""/>
    </div>
  </section>
  <div style="display:none">
  	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1259823595'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/z_stat.php%3Fid%3D1259823595%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
  </div>
  
  <div class="portfolio-modal modal fade" id="detailModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
             			<div class="modal-body">
			                <div class="container-fluid">
				           		 <div class="row">
				           		 	<iframe id="template-detail" src="detail.html"></iframe>
				           		 </div>
					         </div>
             			</div>
             		</div>
             	</div>
             </div>
        </div>
    </div>
  
  <!-- jQuery --> 
  <script src="js/jquery.js"></script> 
  
  <!-- Bootstrap Core JavaScript --> 
  <script src="js/bootstrap.min.js"></script> 
  
  <!-- Plugin JavaScript --> 
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 
  <script src="js/classie.js"></script> 
  <script src="js/cbpAnimatedHeader.js"></script> 
  
  <!-- Contact Form JavaScript --> 
  <script src="js/jqBootstrapValidation.js"></script> 
  <script src="js/contact_me.js"></script> 
  
  <!-- Custom Theme JavaScript --> 
  <script src="js/freelancer.js"></script> 
  
  <script>
  $(function(){
	  $("#signOfLove").click(function(){
		  $("#template-detail").attr("src","detail/signOfLoveDetail.html");
		  $("#detailModal").modal();
	  });
	  
	  $("#TieTheknot").click(function(){
		  $("#template-detail").attr("src","detail/tieTheKnotDetail.html");
		  $("#detailModal").modal();
	  });
	  
	  $("#blossoming").click(function(){
		  $("#template-detail").attr("src","detail/blossomingDetail.html");
		  $("#detailModal").modal();
	  });
	  
	  $("#redSong").click(function(){
		  $("#template-detail").attr("src","detail/redSongDetail.html");
		  $("#detailModal").modal();
	  });
	  
	  $("#LoveIsAnswer").click(function(){
		  $("#template-detail").attr("src","detail/loveIsAnswerDetail.html");
		  $("#detailModal").modal();
	  });
	  
	  $("#tiffBlue").click(function(){
		  $("#template-detail").attr("src","detail/tiffBlueDetail.html");
		  $("#detailModal").modal();
	  });
	  
  });
  
  adjust();  

  var timeout = null;//onresize触发次数过多，设置定时器  
  window.onresize = function () {  
      clearTimeout(timeout);  
      timeout = setTimeout(function () { window.location.reload(); }, 100);//页面大小变化，重新加载页面以刷新MAP  
  }  

  //获取MAP中元素属性  
  function adjust() {  
      var map = document.getElementById("CribMap");  
      var element = map.childNodes;  
      var itemNumber = element.length / 2;  
      for (var i = 0; i < itemNumber - 1; i++) {  
          var item = 2 * i + 1;  
          var oldCoords = element[item].coords;  
          var newcoords = adjustPosition(oldCoords);  
          element[item].setAttribute("coords", newcoords);  
      }  
      var test = element;  
  }  

  //调整MAP中坐标  
  function adjustPosition(position) {  
      var pageWidth = document.body.clientWidth;//获取页面宽度  
      var pageHeith = document.body.clientHeight;//获取页面高度  

      var imageWidth = 1280;//图片的长宽  
      var imageHeigth = 1679;  
      
      var picw = $("#template-img").width();
      var pich = $("#template-img").height();

      var each = position.split(",");  
      //获取每个坐标点  
      for (var i = 0; i < each.length; i++) {  
          each[i] = Math.round(parseInt(each[i]) * picw / imageWidth).toString();//x坐标  
          i++;  
          each[i] = Math.round(parseInt(each[i]) * pich / imageHeigth).toString();//y坐标  
      }  
      //生成新的坐标点  
      var newPosition = "";  
      for (var i = 0; i < each.length; i++) {  
          newPosition += each[i];  
          if (i < each.length - 1) {  
              newPosition += ",";  
          }  
      }  
      return newPosition;  
  }  

</script> 
</div>
</body>
</html>
